<template>
	<div class="layout-padding">
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column type="index" width="100" label="#" />
			<el-table-column prop="openid" label="小程序openid" />
			<el-table-column prop="nickname" label="会员昵称" />
			<el-table-column prop="phoneNumber" label="联系方式" />
			<el-table-column prop="mineInvitationCode" label="邀请码" />
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex-center">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[100, 200, 300, 400]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { fetchList, delObjs } from '/@/api/coalSystem/userInfo';
import { ElMessage } from 'element-plus';

// 表格内容逻辑
const tableRowClassName = ({ rowIndex }) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};
const tableData = ref([]);
// 表格删除
const handleDelete = (index, row) => {
	delObjs(row.userInfoId).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '删除成功',
				type: 'success',
			});
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
// 表格分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
	getFetchList();
});
const getFetchList = () => {
	fetchList({
		current: currentPage.value,
		size: pageSize.value,
		userType: 1,
	})
		.then((res: any) => {
			const { code, msg, data } = res;
			if (code == 0) {
				tableData.value = data.records;
				total.value = data.total;
			} else {
				ElMessage({
					message: msg,
					type: 'warning',
				});
			}
		})
		.finally(() => {
			// loading.value = false;
		});
};
const handleSizeChange = (val: number) => {
	pageSize.value = val;
	getFetchList();
};
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	getFetchList();
};
</script>
<style scoped>
.mb-20 {
	margin-bottom: 20px;
}

.el-pagination {
	justify-content: center !important;
}
</style>
